<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类root</title>
		<style>
			/* 简单证明 */
			html:root {
				background-color: rgba(0, 0, 0, .1);
			}

			html body {
				border: 5px solid #000000;
			}

			/* ie 8 */
			/* html {
				overflow-y: scroll;
			} */
			/* ie 9+ */
			:root {
				overflow-x: hidden;
			}

			:root body {
				position: absolute;
				width: 100vw;
				overflow: hidden;
			}

			.more-height {
				background-color: rosybrown;
				width: 60px;
				animation: higher 10s forwards;
			}

			@keyframes higher {
				from {
					height: 0;
				}

				to {
					height: 1000px;
				}
			}
		</style>
	</head>
	<body>
		<div>常规中，:root就是html</div>
		<dl>
			<dt>出现滚动条时页面不抖</dt>
			<dd>
				常见做法：设置overflow-y: scroll，令滚动条常现，然后外套div，减去滚动条长度。
				设置margin-left: calc(100vw - 100%)。但小屏时，左侧空隙就过于显眼，可以用查询语句优化。
				<br>
				root方法 :root body {
				position: absolute;
				width: 100vw;
				overflow: hidden;
				}
			</dd>
			
			<dt>css的变量都写在:root中</dt>
		</dl>
		<div class="more-height">搅屎棍</div>
	</body>
</html>
